<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content search_form program_plan">
      <e-heading grade='1'>{{subjectName}}训练计划</e-heading>
      <el-form label-width="100px">
        <el-form-item label="上课时间：">
          {{schedulInfo.time}}
        </el-form-item>
        <el-form-item label="上课校区：">
          {{schedulInfo.schollName}}
        </el-form-item>
        <el-form-item label="课时主题：">
          <template v-if="schedulInfo.scheduleName">{{schedulInfo.scheduleName}}</template>
          <div v-else class="form-help">暂无内容</div>
        </el-form-item>
        <el-form-item label="训练方式：">
          <div class="plan-btn-wrapper" v-if="tableList && tableList.length">
            <el-button type="link" @click="goProgramplan()">更改训练计划</el-button>
            <el-button type="link" @click="handleDeletePlan()">删除</el-button>
          </div>
          <div v-else class="form-help">暂无内容</div>
        </el-form-item>
      </el-form>
      <!-- 训练计划列表 -->
      <plan-list 
        :data="tableList"
        @detail="handleDetail"
        v-if="tableList && tableList.length"/>
      <div class="btn-wrapper">
        <template v-if="tableList && tableList.length">
          <el-button type="success" @click="$router.go(-1)">返回训练大纲</el-button>
        </template>
        <template v-else>
          <el-button type="success" @click="goProgramplan()">选择训练计划</el-button>
        </template>
      </div>
    </div>  
  </div>
</template>
<script>
// /training/trainingprogram/plan
// import { mapGetters } from 'vuex'

import {form} from 'utils/mixins'
import filters from 'src/filters'
import trainApi from 'api/train'
import trainProApi from 'api/trainingProgram'
import PlanList from '../plan/components/PlanList'

export default {
  mixins: [form],
  components: {
    PlanList
  },
  computed: {
    scheduleId () {
      return this.$route.query.id
    },
    subjectName () {
      return this.$route.query.subjectName
    },
    tableList () {
      return this.schedulInfo.listTrainPlan
    }
  },
  created () {
    this.initData()
  },
  data () {
    return {
      schedulInfo: {}
    }
  },
  methods: {
    initData () {
      trainApi.getDrillplanInfo({schedulId: this.scheduleId}).then(({data}) => {
        let date = filters.FormatDate(data.classDate, 'yyyy-MM-dd')
        let beginTime = filters.FormatDate(data.beginTime, 'HH:mm')
        let endTime = filters.FormatDate(data.endTime, 'HH:mm')
        this.schedulInfo = data
        this.schedulInfo.time = `${date} ${beginTime} - ${endTime}`
      })
    },
    handleDetail (row) {
      this.$router.push({path: '/training/trainingprogram/mode/show', query: {id: row.id}})
    },
    handleDeletePlan () {
      this.$confirm('确定删除该课时的训练计划吗？', {
        title: '温馨提示',
        type: 'warning'
      }).then(() => {
        trainProApi.selectedTemp({id: this.schedulInfo.id}, {successMsg: '删除成功', type: 'DELETE'}).then(() => {
          this.initData()
        })
      })
    },
    goProgramplan () {
      this.$router.push('/training/trainingprogram/plan/selected-temp?id=' + (this.schedulInfo.id || '') + '&scheduleId=' + this.scheduleId)
    }
  }
}
</script>
<style lang="scss">

.program_plan{
  .el-form-item{
    margin-bottom: 8px;
    .form-help{
      line-height: 36px;
    }
    .plan-btn-wrapper{
      text-align: right;
      .el-button{
        vertical-align: middle;
        min-width: auto;
      }
    }
  }
  .dragged-plan {
    width:100%;
    border-left:1px solid #f2f2f2;
  }
  .btn-wrapper{
    margin-top: 20px;
    text-align: center;
  }
}
</style>
